<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <title>小米商城_Tsl</title>
</head>
<body>
    <!-- 搜索模块 -->
    <div class="seacher_content">
        <div class="seacher_logo">
            <img src="icons/icon-logo.png" alt="">
        </div>
        <div class="seacher">
            <form action="###">
                <input type="text" placeholder="搜索商品名称">
            </form>
        </div>
        <div class="seacher_in">
            <img src="icons/icon-user.png" alt="">
        </div>
    </div>
<!-- 推荐导航模块 -->
    <div class="recommend">
        <a href="###">推荐</a>
        <a href="###">智能</a>
        <a href="###">电视</a>
        <a href="###">家电</a>
        <a href="###">笔记本</a>
    </div>
<!-- banner轮播 --> 
    <div class="banner_content">
         <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <img src="images/banner1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="images/banner2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="images/banner3.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 十个导航模块 -->
        <div class="nav_content">
            <a href="###"><img src="images/nav1.jpg" alt="米金商城"></a>
            <a href="###"><img src="images/nav2.jpg" alt="小米众筹"></a>
            <a href="###"><img src="images/nav3.jpg" alt="手机"></a>
            <a href="###"><img src="images/nav4.jpg" alt="以旧换新"></a>
            <a href="###"><img src="images/nav5.jpg" alt="小米上新"></a>
            <a href="###"><img src="images/nav6.jpg" alt="智能"></a>
            <a href="###"><img src="images/nav7.png" alt="笔记本热卖"></a>
            <a href="###"><img src="images/nav8.png" alt="电视热卖"></a>
            <a href="###"><img src="images/nav9.jpg" alt="洗衣机热卖"></a>
            <a href="###"><img src="images/nav10.png" alt="米粉卡"></a>
        </div>
    <!-- 商品模块_1 -->
    <div class="commodity_content_one">
        <a href="###" class="commodity_one_item"><img src="images/commodity_1-1.jpg" alt=""></a>
        <div class="commodity_one_item commodity_one_item2">
            <a href="###">
                
                <img src="images/commodity_1-2.jpg" alt="">
            </a>
            <a href="###">
                
                <img src="images/commodity_1-3.jpg" alt="">
            </a>
        </div>
    </div>
    <!-- 热销爆款模块 -->
    <div class="expenditures">
        <a href="###" class="expenditures_banner">
            <img src="images/Expenditures.jpg" alt="热销爆款">
        </a>
        <div class="phonemodel">
            <a href="###" class="phone_model">
                <img src="images/redmik50.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Redmi K50</span>
                    <span class="phone_size">2K直屏的狠旗舰</span>
                    <span class="phone_price">￥2399</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
            <a href="###" class="phone_model">
                <img src="images/xiaomi12s.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Xiaomi 12S</span>
                    <span class="phone_size">小尺寸性能旗舰 | 徕卡影像</span>
                    <span class="phone_price">￥3999</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
            <a href="###" class="phone_model">
                <img src="images/xiaomi12pro.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Xiaomi 12 Pro</span>
                    <span class="phone_size">全新骁龙8｜2K AMOLED屏幕</span>
                    <span class="phone_price">￥4699</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
            <a href="###" class="phone_model">
                <img src="images/note11pro.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Note 11 Pro系列</span>
                    <span class="phone_size">三星AMOLED高刷屏</span>
                    <span class="phone_price">￥1799</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
            <a href="###" class="phone_model">
                <img src="images/note11t.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Redmi Note 11T Pro</span>
                    <span class="phone_size">天玑8100｜真旗舰芯</span>
                    <span class="phone_price">￥1799</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
            <a href="###" class="phone_model">
                <img src="images/note114g.jpg" alt="">
                <section class="phone_introduction">
                    <span class="phone_name">Redmi Note 11 4G</span>
                    <span class="phone_size">5000mAh大电量</span>
                    <span class="phone_price">￥999</span>
                    <span class="phone_purchase">立即购买</span>
                </section>
            </a>
        </div>
        <div class="more_products">更多小米电视产品 ></div>
    </div>
<!-- 米家智能模块 -->
    <div class="printer">
        <a href="###">
            <img src="images/intelligence.jpg" alt="">
        </a>
        <div class="more_products">更多米家家电产品 ></div>
    </div>
<!-- 更多米家智能产品模块 -->
    <div class="more_intelligent_products">
        <div class="more_products more_intelligent_products_txt">更多米家智能产品 ></div>
        <div class="more_seven">
            <a href="###">
                <img src="images/work_office.jpg" alt="">
            </a>
            <a href="###">
                <img src="images/family.jpg" alt="">
            </a>
            <a href="###">
                <img src="images/travel.jpg" alt="">
            </a>
            <a href="###">
                <img src="images/headset.jpg" alt="">
            </a>
            <a href="###">
                <img src="images/new_home.jpg" alt="">
            </a>
            <a href="###">
                <img src="images/Design.jpg" alt="">
            </a>
        </div>
        <div class="recovery">
            <img src="images/recovery.jpg" alt="xiaomihuanxin">
            <a href="####" class="understand">
                    <img src="images/understand.png" alt="">
            </a>
        </div>
    </div>
    <br>
    <br>
    <br>
<!-- 底部导航模块 -->
    <div class="footer">
        <a href="###" class="home">
            <img src="icons/icon-home.png" alt="首页">
            <span>首页</span>
        </a>
        <a href="###" class="list">
            <img src="icons/category.png" alt="分类">
            <span>分类</span>
        </a>
        <a href="###" class="circle">
            <img src="icons/star.png" alt="米圈">
            <span>米圈</span>
        </a>
        <a href="###" class="goshop">
            <img src="icons/cart.png" alt="购物车">
            <span>购物车</span>
        </a>
        <a href="###" class="my">
            <img src="icons/icon-user.png" alt="我的">
            <span>我的</span>
        </a>
     
    </div>
    <script src="js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
</body>
</html>